<template>
  <div id="roles" class="heightAll widthAll home"> <!--这样可以设置多个class-->
    <top tar="roles"/>
    <!--表格组件， 定义data后，prop即属性-->
    <el-table v-loading="loading" :data="roleList" border class="el-table" header-align="center"
              highlight-current-row stripe style="width: 100%; text-align: center;">
      <ex-table-column :autoFit='true' label="用户编号" prop="id">
      </ex-table-column>
      <ex-table-column :autoFit='true' label="用户名" prop="username">
      </ex-table-column>
      <ex-table-column :autoFit='true' label="管理员权限" prop="guanli">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.guanli"></el-checkbox>
        </template>
      </ex-table-column>
      <ex-table-column :autoFit='true' label="零售权限" prop="lingshou">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.lingshou"></el-checkbox>
        </template>
      </ex-table-column>
      <ex-table-column :autoFit='true' label="采购权限" prop="caigou">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.caigou"></el-checkbox>
        </template>
      </ex-table-column>
      <ex-table-column :autoFit='true' label="销售权限" prop="xiaoshou">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.xiaoshou"></el-checkbox>
        </template>
      </ex-table-column>
      <ex-table-column :autoFit='true' label="仓库权限" prop="cangku">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.cangku"></el-checkbox>
        </template>
      </ex-table-column>
      <ex-table-column label="操作" width="250px">
        <template slot-scope="scope"> <!--scope.row即按钮当前行的数据对象,需配置slot-->
          <!--scope.row保存该行数据-->
          <el-link icon="el-icon-edit" style="margin-right: 15px;" type="primary" @click="updateRole(scope.row)">更新权限
          </el-link>
          <el-link icon="el-icon-key" style="margin-right: 15px;" type="primary" @click="resetPassword(scope.row)">重置密码
          </el-link>
          <el-link icon="el-icon-delete" type="danger" @click="deleteById(scope.row)">删除</el-link>
        </template>
      </ex-table-column>
    </el-table>
    <br>
    <el-pagination :current-page="form.pageNo"
                   :page-size="form.pageSize"
                   :page-sizes="[5,10,15]"
                   :total="total"
                   background
                   class="my-changePage"
                   layout="total, sizes, prev, pager, next, jumper"
                   @current-change="change"
                   @size-change="handleSizeChange">
    </el-pagination>

    <el-dialog :visible.sync="dialogFormVisible" style="font-family: 'Microsoft YaHei UI',sans-serif"
               width="40%">
      <div slot="title" class="my-dialog-title">
        <i class="el-icon-s-tools"></i> 重置密码
      </div>
      <!--最tmd蛋疼的地方，model，ref 得同名，prop和对象也要一样，才能正确重置      -->
      <el-form ref="password" :model="password" :rules="rules" auto status-icon>
        <el-form-item label="新密码" label-width="200" prop="newPassword">
          <el-input v-model="password.newPassword" autocomplete="off" show-password>
            <template slot="append"><i class="el-icon-key"></i></template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="action('password')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import top from "../../components/backToTop";
import {getUsers, updateUserRoles} from "../../api/user";
import common from "../../api/common";
import qs from "qs";

export default {
  name: "index",
  components: {
    top
  },
  data() {
    return {
      loading: true,
      roleList: [],
      total: 0,
      form: {
        pageNo: 1,
        pageSize: 5
      },
      dialogFormVisible: false,
      rules: {
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/, message: "请勿输入特殊字符", trigger: "blur"},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
      },
      id: null,
      password: {
        newPassword: ''
      },
    }
  }, mounted() {
    this.getUsers()
  }, methods: {
    change(currentPage) { //换页，点击页码
      this.pageNo = currentPage;
      this.getUsers();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getUsers();
    },
    resetPassword(row) {
      this.id = row.id;
      this.$nextTick(_ => {
        if (this.$refs.password)
          this.$refs.password.resetFields();
      })
      this.dialogFormVisible = true;
    },
    resetForm() {
      this.dialogFormVisible = false;
    },
    deleteById(row) {
      const _this = this;
      common.ifDeleteConfirm(this).then(resp => {
        if (resp) {
          // bookInfo.dispatch('deleteBookById', row.id).then(resp => {
          //   common.afterUpdateActions(this, resp, '删除', null, false);
          // });
          alert(1)
        }
      });
    },
    updateRole(row) {
      updateUserRoles(row).then(resp => {
        if (resp.code === 200) {
          this.$message.success("更新权限成功");
        } else {
          this.$message.warning("更新权限失败");
        }
        this.getUsers();
      });
    },
    getUsers() {
      const _this = this;
      _this.loading = true;
      getUsers(_this.form).then(rs => {
        if (rs.code === 200) {
          _this.roleList = rs.message.records;
          _this.total = rs.message.total;
          _this.loading = false;
        }
      })
    },
    action(formName) {
      const _this = this;
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post("/user/resetUserPassword", qs.stringify({
            id: _this.id,
            password: this.password.newPassword.replaceAll(" ", '')
          })).then(resp => {
            if (resp.data.code === 200) {
              this.$message.success("更新用户密码成功");
              this.dialogFormVisible = false;
            } else {
              this.$message.warning("更新用户密码失败");
            }
          })
        }
      })
    }
  }
}
</script>

<style>
.el-table th, td {
  text-align: center !important;
  font-size: 1.1em;
}

.el-table .cell,
.el-table th > .cell {
  /*换了网上的column后 ，下面这个auto才能居中*/
  margin: auto;
  white-space: nowrap;
  width: fit-content;
}
</style>